<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="head_back posabs zin-1 wth100">
		</view>
		<view class="background_f pad20 min30 rad1 column">
			<view class="font600 size30" style="color: #2E3C2A;">
				门店信息
			</view>
			<view class="row padbottom20 mintop30 align_item_c border_bottom">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					姓名
				</view>
				<u--input placeholder="请输入您的真实姓名" placeholderStyle="font-size: 28rpx;" border="none"
					v-model="name"></u--input>
			</view>
			<view class="row padbottom20 mintop30 align_item_c border_bottom">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					身份证
				</view>
				<u--input placeholder="请输入身份证号" maxlength="18" placeholderStyle="font-size: 28rpx;" border="none"
					v-model="IDcard"></u--input>
			</view>
			<view class="row padbottom20 mintop30 align_item_c border_bottom">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					手机号
				</view>
				<u--input placeholder="请输入手机号" type="number" maxlength="11" placeholderStyle="font-size: 28rpx;"
					border="none" v-model="phone"></u--input>
			</view>
			<view class="row padbottom20 mintop30 align_item_c border_bottom">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					门店名称
				</view>
				<u--input placeholder="请输入门店名称" placeholderStyle="font-size: 28rpx;" border="none"
					v-model="shop_name"></u--input>
			</view>
			<view class="row padbottom20 mintop30 align_item_c border_bottom">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					门店地址
				</view>
				<view class="flex1" @click="onAdd">
					<u--input placeholder="请输入门店具体地址" disabled="true" placeholderStyle="font-size: 28rpx;" border="none"
						v-model="shop_add"></u--input>
				</view>

			</view>
			<view class="row mintop30">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					门店LOGO
				</view>
				<u-upload :fileList="fileList1" :width="screenWidth" height="120" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
			</view>
			<view class="row mintop30">
				<view class="font600 size28" style="color: #2E3C2A;width: 80px;">
					营业执照
				</view>
				<u-upload :fileList="fileList2" :width="screenWidth" height="120" @afterRead="afterRead"
					@delete="deletePic" name="2" multiple :maxCount="1"></u-upload>
			</view>
		</view>
		<view class="pad20 min30_rl rad1 column box">
			<view class="size30 font600 col0 text_center minbottom20">
				申请门店规则说明
			</view>
			<view class="">
				<mp-html :content="html" />
			</view>
		</view>
		<view class="min30 padtop40">
			<u-button text="提交申请" shape="circle" color="linear-gradient( 90deg, #FFCC48 0%, #FF984E 100%)"
				@click="getApply">
			</u-button>
		</view>
		<view style="height: 10rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenWidth: '',
				user_id: '',
				name: '',
				phone: '',
				IDcard: '',
				shop_name: '',
				shop_add: '',
				stores_license: '',
				stores_logo: '',
				shop_add: '',
				longitude: '',
				latitude: '',
				html: '<div>Hello World!</div>',
				fileList1: [],
				fileList2: []
			}
		},

		onLoad() {
			let app = uni.getSystemInfoSync()
			this.screenWidth = app.screenWidth - 135
			this.user_id = uni.getStorageSync('user_id');
			this.getAgreement()
		},
		methods: {
			async getAgreement() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/agreement")
				if (code == 200) {
					this.html = data.store_application
			
				} else {
					console.log(message);
				}
			},
			onAdd() {
				var _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						_this.shop_add = res.address
						_this.latitude = res.latitude
						_this.longitude = res.longitude
					}
				});
			},
			async getApply() {
				var _this = this
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				var id =
					/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
				if (!_this.name) return this.$com.toast('请输入您的真实姓名');
				if (!_this.IDcard) return this.$com.toast('请输入身份证号');
				if (!id.test(_this.IDcard)) return this.$com.toast('身份证号输入不正确');
				if (!_this.phone) return this.$com.toast('请输入手机号');
				if (!strTemp.test(_this.phone)) return this.$com.toast('手机号输入不正确');
				if (!_this.shop_name) return this.$com.toast('请输入门店名称');
				if (!_this.shop_add) return this.$com.toast('请输入门店具体地址');
				if (!_this.stores_logo) return this.$com.toast('请上传门店LOGO');
				if (!_this.stores_license) return this.$com.toast('请上传营业执照');
				let {
					code,
					message,
					data
				} = await this.$com.fetch('member/application_shop/' + this.user_id, {
					shop_name: _this.name,
					shop_phone: _this.phone,
					shop_id_card: _this.IDcard,
					stores_name: _this.shop_name,
					stores_license: _this.stores_license,
					stores_logo: _this.stores_logo,
					stores_address: _this.shop_add,
					stores_longitude: _this.longitude,
					stores_dimension: _this.latitude,
				});

				if (code == 200) {
					uni.showToast({
						icon: 'success',
						title: message
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/user/my'
						});
					}, 1000)
				} else {
					uni.showToast({
						icon: 'none',
						title: message
					})
				}

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(event.name, lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(name, url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://xqs197810.com/api/member/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							var data = JSON.parse(res.data)
							if (data.code == 200) {
								if (name == 1) {
									this.stores_logo = data.data
								} else {
									this.stores_license = data.data
								}
							}
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		background: linear-gradient(63deg, #A1C1FF 41%, #FFEFD0 100%), linear-gradient(167deg, #80D9FF 0%, rgba(77, 180, 255, 0) 100%);
		top: 0;
		height: 200rpx;
	}

	.border_bottom {
		border-bottom: 2rpx solid #EDEDED;
	}

	.box {
		background: linear-gradient(180deg, #C9DBFF 0%, #FFFFFF 34%);
	}
</style>